<template>
	<view class="container">
		<swiper circular :indicator-dots="indicatorDots" class="swiper" :autoplay="autoplay" :interval="interval"
			:duration="duration" :style="{height: `${Height}`}">
			<swiper-item v-for="(item,index) in bannerList" :key="index" class="swiper-item">
				<image :src="item.img" mode="widthFix" @load="imgHeight"></image>
			</swiper-item>
		</swiper>
		<view class="cert-details">
			<view class="cert-details_title">证书详情</view>
			<image mode="widthFix" src="../../static/imgs/mine/zhengshuxq.jpg"></image>
			<!-- <image src="../../static/imgs/mine/cert-details01.png"></image> -->
			<!-- <image src="../../static/imgs/mine/cert-details02.png"></image> -->
		</view>
		<view class="footer">
			<view class="footer_formitem">
				<view class="footer_formitem_name">收货人姓名</view>
				<view class="footer_formitem_input">
					<input v-model="address.name" placeholder="请填写姓名" />
				</view>
			</view>
			<view class="footer_formitem">
				<view class="footer_formitem_name">收货人手机号</view>
				<view class="footer_formitem_input">
					<input v-model="address.phone" type="number" maxlength="11" placeholder="请填写手机号" />
				</view>
			</view>
			<view class="footer_formitem">
				<view class="footer_formitem_name">收货详细地址</view>
				<view class="footer_formitem_input">
					<input v-model="address.note" placeholder="请填写详细地址" />
				</view>
			</view>
			<view class="button" @click="payClick">立即支付￥{{format_money(params.price)}}</view>
		</view>
	</view>
</template>

<script>
	import {
		getSportCertDetail
	} from "../../static/js/api/games.js";
	export default {
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				Height: 0,
				bannerList: [
				// 	{
				// 	img: require('../../static/imgs/mine/cert-swiper.png')
				// },
				{
					img: require('../../static/imgs/mine/jiangbei.jpg')
				}],
				address: {
					name: '',
					phone: '',
					note: '',
				},
				params:{}
			}
		},
		onLoad(option) {
			if (option.params) {
				this.params = JSON.parse(option.params)
			}
		},
		methods: {
			format_money(money) {
			  return money * 0.01 + '';
			},
			imgHeight(e) {
				console.log(e)
				var winWid = uni.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
				var imgh = e.detail.height; //图片高度
				var imgw = e.detail.width; //图片宽度
				var swiperH = winWid * imgh / imgw +
					"px" //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
				this.Height = swiperH //设置高度
			},
			// 支付
			payClick() {
				if (this.address.name.length == 0) {
					uni.showToast({
						title: "请填写收货人姓名",
						icon: 'none'
					})
					return
				}
				if (this.address.phone.length == 0) {
					uni.showToast({
						title: "请填写收货人手机号",
						icon: 'none'
					})
					return
				}
				if (!/^1[3456789]\d{9}$/.test(this.address.phone)) {
					uni.showToast({
						title: "手机号格式错误",
						icon: 'none'
					})
					return
				}
				if (this.address.note.length == 0) {
					uni.showToast({
						title: "请填写收货人详细地址",
						icon: 'none'
					})
					return
				}
				let order = {
					orderType: 'cert',
					sport_id:this.params.sport_id,
					user_id:this.params.user_id,
					price:this.format_money(this.params.price),
					name:this.address.name,
					phone:this.address.phone,
					address:this.address.note,
				}
				uni.navigateTo({
					url: '/pages/payment/index?order=' + JSON.stringify(order)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: calc(100% - 60rpx);
		padding: 30rpx 30rpx 0;
		background: #fff;
	}

	.swiper image {
		width: 100%;
	}

	.cert-details {
		background-color: #fff;
		width: calc(100% - 60rpx);
		padding: 30rpx;
		margin-top: 2rpx;
		padding-bottom: 600rpx;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		image{
			width: 100%;
			margin-top: 20rpx;
		}
	}

	.footer {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		padding: 50rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.footer_formitem {
			width: 630rpx;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #F5F5F5;
			border-radius: 10rpx 10rpx;
			margin-bottom: 20rpx;
			padding: 0 30rpx;

			&_name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				line-height: 46rpx;
			}

			input {
				text-align: right;
			}
		}

		.button {
			width: 690rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 10rpx;
			margin-top: 30rpx;
			color: #ffffff;
			font-size: 32rpx;
			font-weight: bold;
			background-color: #FF6E00;

		}
	}
</style>